<template>
	<view class="practice-container">
		<!-- 练习类型网格 -->
		<view class="type-grid">
			<view v-for="(type, index) in practiceTypes" :key="index" class="type-card"
				:class="{active: activeType === index}" @click="selectType(index)">
				<text class="type-name">{{ type.name }}</text>
			</view>
		</view>

		<!-- 当前选择展示 -->
		<view class="current-selection">
			<text class="selection-text">已选择: {{ practiceTypes[activeType].name }}</text>
			<text class="selection-text">题量: {{ selectedQuantity }}题</text>
			<text class="change-btn" @click="showQuantityPopup">修改题量</text>
		</view>

		<!-- 开始练习按钮 -->
		<view class="start-button" @click="startPractice">
			<text>开始练习</text>
		</view>

		<!-- 题量选择弹出框 -->
		<uni-popup ref="quantityPopup" type="bottom" :mask-click="false">
			<view class="quantity-popup">
				<view class="popup-header">
					<text class="popup-title">选择题量</text>
					<uni-icons type="closeempty" size="24" color="#999" @click="hideQuantityPopup"></uni-icons>
				</view>

				<view class="quantity-options">
					<text class="option-title">基础题量</text>
					<view class="preset-options">
						<view v-for="(quantity, qIndex) in presetQuantities" :key="'preset-'+qIndex"
							class="quantity-option" :class="{selected: tempQuantity === quantity}"
							@click="selectPresetQuantity(quantity)">
							{{ quantity }}
						</view>
					</view>

					<text class="option-title">自定义题量</text>
					<view class="custom-quantity">
						<input type="number" v-model="customQuantity" placeholder="输入10-100之间的数字" class="custom-input"
							@input="validateCustomQuantity" />
						<text class="custom-unit">题</text>
					</view>

					<view class="popup-buttons">
						<view class="popup-btn cancel" @click="hideQuantityPopup">
							<text>取消</text>
						</view>
						<view class="popup-btn confirm" @click="confirmQuantity">
							<text>确定</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 练习类型数据
	const practiceTypes = ref([{
			name: '两位数加减'
		},
		{
			name: '凑整百练习'
		},
		{
			name: '三位数加法'
		},
		{
			name: '三位数减法'
		},
		{
			name: '三位数加减'
		},
		{
			name: '多数相加'
		},
		{
			name: '两位数乘一位数'
		},
		{
			name: '三位数乘一位数'
		},
		{
			name: '两位数乘11'
		},
		{
			name: '两位数乘15'
		},
		{
			name: '两位数乘两位数'
		},
		{
			name: '常见平方数'
		},
		{
			name: '三位数除以一位数'
		},
		{
			name: '三位数除以两位数'
		},
		{
			name: '乘法估算'
		},
		{
			name: '五位数除以三位数'
		}
	]);

	// 预设题量选项
	const presetQuantities = ref([10, 20, 30, 50, 100]);
	const selectedQuantity = ref(10);
	const tempQuantity = ref(10);
	const customQuantity = ref('');
	const quantityPopup = ref(null);

	// 当前选中的类型
	const activeType = ref(0);

	// 选择练习类型
	const selectType = (index) => {
		activeType.value = index;
	};

	// 显示题量选择弹出框
	const showQuantityPopup = () => {
		tempQuantity.value = selectedQuantity.value;
		customQuantity.value = presetQuantities.value.includes(selectedQuantity.value) ?
			'' :
			selectedQuantity.value;
		quantityPopup.value.open();
	};

	// 隐藏题量选择弹出框
	const hideQuantityPopup = () => {
		quantityPopup.value.close();
	};

	// 选择预设题量
	const selectPresetQuantity = (quantity) => {
		tempQuantity.value = quantity;
		customQuantity.value = '';
	};

	// 验证自定义题量
	const validateCustomQuantity = (e) => {
		const value = parseInt(e.detail.value);
		console.log(value)
		if (!isNaN(value)) {
			tempQuantity.value = value;
			customQuantity.value = value;
		} else {
			customQuantity.value = '';
		}
	};

	// 确认题量选择
	const confirmQuantity = () => {
		if (customQuantity.value !== '') {
			selectedQuantity.value = parseInt(customQuantity.value);
		} else {
			selectedQuantity.value = tempQuantity.value;
		}
		hideQuantityPopup();
	};

	// 开始练习
	const startPractice = () => {
		uni.navigateTo({
			url: `/pages/mathematicalCalculation/index?practiceType=${encodeURIComponent(practiceTypes.value[activeType.value].name)}&questionCount=${selectedQuantity.value}`
		});
	};
</script>

<style lang="scss">
	.practice-container {
		padding: 30rpx;
		background: linear-gradient(to bottom, #f7fbfe, #e6f2ff);
		min-height: 100vh;
	}

	/* 练习类型网格 */
	.type-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		margin-bottom: 30rpx;
	}

	/* 练习类型卡片 */
	.type-card {
		background-color: white;
		border-radius: 16rpx;
		padding: 30rpx 20rpx;
		text-align: center;
		box-shadow: 0 4rpx 12rpx rgba(74, 140, 255, 0.1);
		transition: all 0.3s ease;
		border: 2rpx solid #e6f2ff;

		.type-name {
			font-size: 28rpx;
			color: #4a8cff;
			font-weight: 500;
		}

		&.active {
			background-color: #4a8cff;
			border-color: #4a8cff;
			transform: translateY(-4rpx);
			box-shadow: 0 8rpx 20rpx rgba(74, 140, 255, 0.2);

			.type-name {
				color: white;
			}
		}
	}

	/* 当前选择展示 */
	.current-selection {
		background-color: white;
		border-radius: 16rpx;
		padding: 25rpx 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(74, 140, 255, 0.1);

		.selection-text {
			display: block;
			font-size: 28rpx;
			color: #4a8cff;
			margin-bottom: 10rpx;
		}

		.change-btn {
			display: inline-block;
			font-size: 26rpx;
			color: #4a8cff;
			padding: 8rpx 20rpx;
			border: 1rpx solid #4a8cff;
			border-radius: 20rpx;
			margin-top: 10rpx;
		}
	}

	/* 开始练习按钮 */
	.start-button {
		background: linear-gradient(to right, #4a8cff, #6ab5ff);
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		border-radius: 45rpx;
		color: white;
		font-size: 34rpx;
		font-weight: bold;
		box-shadow: 0 8rpx 20rpx rgba(74, 140, 255, 0.3);
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.98);
			box-shadow: 0 4rpx 10rpx rgba(74, 140, 255, 0.2);
		}
	}

	/* 题量选择弹出框样式 */
	.quantity-popup {
		background-color: white;
		border-radius: 30rpx 30rpx 0 0;
		padding: 40rpx 30rpx;

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;

			.popup-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #2a5caa;
			}
		}

		.option-title {
			display: block;
			font-size: 28rpx;
			color: #666;
			margin-bottom: 20rpx;
		}

		.preset-options {
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx;
			margin-bottom: 40rpx;
		}

		.quantity-option {
			width: 100rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background-color: #f0f7ff;
			border-radius: 12rpx;
			font-size: 28rpx;
			color: #4a8cff;
			transition: all 0.3s ease;

			&.selected {
				background-color: #4a8cff;
				color: white;
				transform: scale(1.1);
			}
		}

		.custom-quantity {
			display: flex;
			align-items: center;
			margin-bottom: 50rpx;

			.custom-input {
				flex: 1;
				height: 80rpx;
				background-color: #f0f7ff;
				border-radius: 12rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
				color: #4a8cff;
				margin-right: 20rpx;
			}

			.custom-unit {
				font-size: 28rpx;
				color: #4a8cff;
			}
		}

		.popup-buttons {
			display: flex;
			gap: 20rpx;

			.popup-btn {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 40rpx;
				font-size: 30rpx;
				font-weight: 500;

				&.cancel {
					background-color: #f5f5f5;
					color: #666;
				}

				&.confirm {
					background: linear-gradient(to right, #4a8cff, #6ab5ff);
					color: white;
					box-shadow: 0 4rpx 12rpx rgba(74, 140, 255, 0.3);
				}
			}
		}
	}

	/* 动画定义 */
	@keyframes fadeInDown {
		from {
			opacity: 0;
			transform: translateY(-20px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>